<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <!--引入vue.js-->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        div {
            background-color: antiquewhite;
            width: 600px;
            height: 400px;
            margin: auto;
            position: relative;
            text-align: center;
            padding-top: 50px;
        }
        input[type='button'] {
            height: 35px;
            width: 120px;
        }
        a {

        }
    </style>
</head>
<body>
<!--    v-on 事件 -->
<!--v-on.stop 停止冒泡，不向上级元素传递事件-->
<!--<div id="app" @click="divClick">-->
<!--    &lt;!&ndash;.stop btn点击后，div不再接收到点击事件&ndash;&gt;-->
<!--    <input type="button" value="btn" @click.stop="btnClick" />-->

<!--    &lt;!&ndash;.prevent 阻止默认事件，点击事件依旧会传递到div， 对于标签不再打开链接&ndash;&gt;-->
<!--    <a href="http://baidu.com" @click.prevent="linkClick">链接</a>-->
<!--</div>-->

<!--.capture捕获事件，点击按钮时，可以让事件先被div捕获到，再到按钮-->
<!--<div id="app" @click.capture="divClick">-->
<!--    &lt;!&ndash;.stop btn点击后，div不再接收到点击事件&ndash;&gt;-->
<!--    <input type="button" value="btn" @click="btnClick" />-->
<!--</div>-->

<!--.self 只有点击自己才触发事件，点击子元素不会触发， 不会阻止事件冒泡-->
<!--<div id="app" @click.self="divClick">-->
<!--    &lt;!&ndash;.stop btn点击后，div不再接收到点击事件&ndash;&gt;-->
<!--    <input type="button" value="btn" @click="btnClick" />-->
<!--</div>-->

<!--.once事件只触发一次, 此处只阻止一次默认事件，后续不在阻止。 @click.once 只触发一次点击 -->
<a href="http://baidu.com" @click.prevent.once="linkClick">链接</a>

<script>
    //
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            btnClick: function () {
                console.log('btn click');
            },
            divClick() {
                console.log('div click');
            },
            linkClick() {
                console.log("a click")
            }
        }
    })
</script>
</body>
</html>
